<template>
  <div class="dashboard">
    <div class="app-container">
      <el-card class="box-card">
        <!-- 页头 -->
        <div
          slot="header"
          class="clearfix"
        >
          <span>校园报修平台</span>
        </div>

        <div class="data">
          <template v-if="type!==2">
            <el-statistic
              is-dot
              :title="repairState[1]"
              :value='stateObj[1] || 0'
            >
              <template slot="suffix">
                <el-badge
                  is-dot
                  class="item"
                  v-if="stateObj[1] && type===4"
                ></el-badge>
              </template>
            </el-statistic>
            <el-statistic
              is-dot
              :title="repairState[3]"
              :value='stateObj[3] || 0'
            >
              <template slot="suffix">
                <el-badge
                  is-dot
                  class="item"
                  v-if="stateObj[3] && type===1"
                ></el-badge>
              </template>
            </el-statistic>
            <el-statistic
              is-dot
              :title="repairState[2]"
              :value='stateObj[2] || 0'
            >
              <template slot="suffix">
                <el-badge
                  is-dot
                  class="item"
                  v-if="stateObj[2] && type===4"
                ></el-badge>
              </template>
            </el-statistic>
          </template>
          <el-statistic
            is-dot
            :title="repairState[4]"
            :value='stateObj[4] || 0'
          >
            <template slot="suffix">
              <el-badge
                is-dot
                class="item"
                v-if="stateObj[4] && type===2"
              ></el-badge>
            </template>
          </el-statistic>
          <el-statistic
            is-dot
            :title="repairState[5]"
            :value='stateObj[5] || 0'
          >
            <template slot="suffix">
              <el-badge
                is-dot
                class="item"
                v-if="stateObj[5] && type===2"
              ></el-badge>
            </template>
          </el-statistic>
          <el-statistic
            is-dot
            :title="repairState[6]"
            :value='stateObj[6] || 0'
          >
          </el-statistic>
          <el-statistic
            is-dot
            :title="repairState[7]"
            :value='stateObj[7] || 0'
          >
            <template slot="suffix">
              <el-badge
                is-dot
                class="item"
                v-if="stateObj[7] && type===2"
              ></el-badge>
            </template>
          </el-statistic>
        </div>
        <strong class="title">最新公告</strong>
        <el-collapse
          v-model="activeName"
          accordion
        >
          <el-collapse-item
            v-for="(item, index) in announceList"
            :key="item.id"
            :title="'【'+ new Date(item.ctime).toLocaleDateString().replace(/\//g, '-')+ '】 ' + item.title"
            :name="index"
          >
            <div v-html='item.content'></div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getAnnounceListAPI, getContAPI, getUserInfoTypeAPI } from '@/api'
import { repairState } from '@/utils'
export default {
  name: 'myDashboard',
  data () {
    return {
      announceList: [],
      activeName: '',
      stateObj: [],
      repairState,
      type: 0,
      date: Date.now() + (new Date().setHours(23, 59, 59) - Date.now())
    }
  },
  async created () {
    this.getContFn()
    this.getAnnounceListFn() // 获取通知公告列表
    this.type = (await getUserInfoTypeAPI()).data.type
  },
  methods: {
    // 获取通知公告列表 -> 发送请求
    async getAnnounceListFn () {
      try {
        const { success, code, data } = await getAnnounceListAPI({
          page: 1,
          pagesize: 10
        })
        if (success && code === 10000) {
          this.announceList = data.row
          this.total = data.total
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    // 获取报修单数量
    async getContFn () {
      try {
        const { success, code, data } = await getContAPI()
        if (success && code === 10000) {
          data.forEach((item) => {
            this.$set(this.stateObj, item.state, item.cont)
          })
        }
      } catch (err) {
        return console.dir(err)
      }
    },
    hilarity () {
      this.date = Date.now() + (new Date().setHours(23, 59, 59) - Date.now())
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  line-height: 50px;
}
.data {
  display: flex;
  margin: 30px 0 70px;

  span {
    flex: 1;
  }
}
</style>
